<template>
  <div class="ripe">
    <Navi :title="'搜索'" :flexd="true" />
    <van-search
      v-model="value"
      show-action
      background="#F5F5F5"
      placeholder="请输入电影名称"
      @search="onSearch"
    >
    </van-search>
    <div class="nav" v-show="isHas">
      <div class="abox" @click="del()">
        <span>清空</span>
        <van-icon name="delete-o" class="delete-icon" />
      </div>
      
      <div class="box" v-for="(item, index) in lishi" :key="index">
        <van-cell @click="gosou(item.li)" :title="item.li"></van-cell>
      </div>
    </div>
  </div>
</template>

<script>
import Navi from "../components/Navi.vue";
export default {
  name: "Sripe",
  components: {
    Navi,
  },
  data() {
    return {
      value: "",
      data: [],
      isHas: true,
      lishi: [],
      k : 0
    };
  },
  created() {
    let loc = JSON.parse(localStorage.getItem("lishi") || "[]");
    
    if (loc.length === 0) {
      this.isHas = false;
    }else{
      this.lishi = loc;
    this.isHas = true;
    }
    
  },
  methods: {
    onSearch(value) {
      
      if (value === "") {
        this.$toast("不能为空！");
        return;
      } else {
        // //获取本地存储的聊天记录

        let localData = localStorage.getItem("lishi");

        if (!localData) {
          localData = [];
        } else {
          localData = JSON.parse(localData);
        }
        
        
        let addList = {
          li: value,
        };
        localData.push(addList);
        localStorage.setItem("lishi", JSON.stringify(localData));

        this.$router.push({ name: "Isripe", params: { value: value } });
        this.k+=this.k
      }
    },
    gosou(event){
      
      this.$router.push({ name: "Isripe", params: { value: event } });
    },
    del(){
      localStorage.removeItem('lishi');
      this.lishi=[];
    }
  },
};
</script>

<style lang="less" scoped>
/deep/.van-field__body {
  background-color: #fff;
}
/deep/.van-cell{
  border-bottom: 1px solid #ddd;
}
.ripe {
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
}
.delete-icon {
  font-size: 16px;
  line-height: inherit;
}
.abox{
  width: 100%;
  text-align: right;
  padding-right: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;

}
</style>